<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-form :inline="true" :model="form" class="demo-form-inline" 
    @submit.native.prevent> 
    <!-- 阻止原生事件的属性: 回车自动提交表单 -->
      <el-form-item label="电影">
        <el-input
          v-model="form.name"
          @keyup.native.enter="onSubmit"
          placeholder="模糊查询电影"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">电影列表</el-divider>

    <!-- 表格 -->
    <el-table :data="moviesData.result">
      <el-table-column label="封面图" width="100px">
        <template slot-scope="scope">
          <img :src="scope.row.cover" width="80px" />
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="主演" prop="star_actor"></el-table-column>
      <el-table-column label="上映时间" prop="showingon"></el-table-column>
      <el-table-column label="时长" width="80px">
        <template slot-scope="scope"> {{ scope.row.duration }}分钟 </template>
      </el-table-column>
      <el-table-column label="所属类别">
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button     size="small" 
          @click="$router.push(`/home/movie-update/${scope.row.id}`)"
            type="success"  icon="el-icon-edit" circle
          ></el-button>
          <el-button size="small" type="info" icon="el-icon-user-solid" circle></el-button>
          <el-button size="small" type="warning" icon="el-icon-star-off" circle></el-button>
          <el-button @click="delItem(scope.row.id)"
            size="small"    type="danger" icon="el-icon-delete"
            circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination  v-if="this.moviesData"
      :page-size="moviesData.pagesize"
      :current-page="moviesData.page"
      :total="moviesData.total"
      background
      @current-change="pageChange"
      layout="->,prev, pager, next,jumper">
      <!-- 组件的自定义事件的函数 传参($event) 也可以不写,会自动传参 -->
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据是 -- 查询电影功能用的
      form: {
        name: "",
      },
      // 监测用户是否点击了查询按钮
      // -- 解决用户输入内容之后但是没有点击查询,想看查询所有的结果
      keyword: {
        name: "",
      },
      //   绑定电影列表数据
      moviesData: {
        page: 1,
        pagesize: 5,
        total: 0,
      },
    };
  },
  mounted() {
    let params={page:1,pagesize:this.moviesData.pagesize}
    this.$http.movieApi.queryAll(params).then(res=>{
      console.log('初始化电影列表',res);
      this.moviesData=res.data.data
      console.log(this.moviesData);
    })
  },
  // 非空判断
  methods: {
    //删除电影列表项 : 发送请求删除; 删除成功后更新列表
    delItem(id) {
      console.log("待删除电影ID" + id);
      this.$confirm("改操作将永久删除该电影,是否继续?", "提示", {
        type: "warning",
      }).then(() => {
        this.$http.movieApi.delete({id}).then((res) => {
          this.$message({type:'success',message:'删除成功'})
          // 刷新当前列表 :整理参数发送请求 ; 有 keyword 模糊查询 ; 没有就直接查询
          if (this.keyword) {
            let params = {
              name: this.keyword,
              page: this.moviesData.page,
              pagesize: this.moviesData.pagesize,
            };
            this.$http.movieApi.queryByNameLike(params).then((res) => {
              console.log("模糊查询结果", res);
              this.moviesData = res.data.data;
            });
          } else {
            let params = {
              page: this.moviesData.page,
              pagesize: this.moviesData.pagesize,
            };
            this.$http.movieApi.queryAll(params).then((res) => {
              console.log("初始化的电影列表", res);
              this.moviesData = res.data.data;
            });
          }
        });
      });
    },
    onSubmit() {
      this.keyword = this.form.name; // 分页使用 -- 点击搜索才进行分页查询
      // 业务逻辑: 如果用户输入了就进行查询 ; 没有输入就查询所有
      if (this.form.name.trim()) {
        // trim() 是去掉两边空格
        let params = {
          name: this.form.name,
          page: 1,
          pagesize: this.moviesData.pagesize,
        };  // 根据接口文档查看需要传递的参数 -- 接口文档!!
        this.$http.movieApi.queryByNameLike(params).then((res) => {
          console.log(res);
          this.moviesData = res.data.data;
        });
      } else {
        let params={page:1,pagesize:this.moviesData.pagesize}
        this.$http.movieApi.queryAll(params).then(res=>{
          console.log('初始化电影列表',res);
          this.moviesData=res.data.data
        })
       
      }
    },
    // 分页查询 : 查询之后页数要与查询结构的数据对应
    // 业务逻辑 : 用户输入之后进行分页查询,点击页数可以继续查询;
    //            没输入的话就查询所有的
    pageChange(page) {  //组件抛出的自定义事件 且传递参数
      console.log(page);
      if (this.keyword) {
        let params = {
          name: this.keyword,
          page: page,
          pagesize: this.moviesData.pagesize,
        };
        this.$http.movieApi.queryByNameLike(params).then((res) => {
          // 可能会有一些异常处理  比如 code=400
          console.log(res);
          this.moviesData = res.data.data;
        });
      } else {
        let params = { page, pagesize: this.moviesData.pagesize };
        this.$http.movieApi.queryAll(params).then((res) => {
          console.log(res);
          this.moviesData = res.data.data;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>